<template>
    <div class="home-box">
        <!-- 首页分类列表 start -->
        <div v-for="(item, index) in types" :key="index">
            <div class="list-name">
                <span>{{ item.typeName }}</span>
                <span class="list-more">更多 ></span>
            </div>
            <FilmList class="list-content" :list="item.list"></FilmList>
        </div>
        <!-- 首页分类列表 end -->
    </div>
</template>
<script>
import axios from "axios";
import QS from 'qs';
// window.QS = QS;
import FilmList from "../components/FilmList";

export default {
    components: {
        FilmList
    },
    data() {
        return {
            types: [],
        };
    },
    methods: {
        postTypesData(){
            /*
                axios.post(url[, data[, config]])
                - url : 请求地址
                - data : 描述post 请求的相关参数
                        1、如果参数取值类型为 string ，且结构为 key=value&key=value……，
                                    请求以数据参数的方式进行传递
                        2、如果参数取值为非 string 都作为数据流进行传递
                - config : 完成请求的基本配置
            */
           axios.post("/filmApi/loadTyps.php",null,{
               baseURL:this.$baseUrl
           }).then((response)=>{
               console.log(response);
           }).catch((error)=>{
               console.log(error);
           });
        },
        postFilmsDataById(){
            // axios.post("/filmApi/loadFilms.php",null,{
            //     baseURL:this.$baseUrl,
            //     // params 配置仅用于 get 类型方式参数定义 （url参数）
            //     // params:{
            //     //     size:1
            //     // }
            //     // data 配置仅用于 post 类型方式参数的定义 （请求体）
            //     //     通过data的取值方式 描述传递的参数是数据还是数据流
            //     //     1、如果参数取值类型为 string ，且结构为 key=value&key=value……，
            //     //        请求不进行参数处理
            //     //     2、如果参数取值为非 string 都作为数据流进行传递
            //     // data:"size=1&typeId=10002"
            // }
            axios.post(
                "/filmApi/loadFilms.php",
                // { size:1 }, 
                // "size=1&typeId=10002",
                QS.stringify({
                    size:1,
                    typeId:10002
                }),
                { 
                    baseURL:this.$baseUrl,
                    // headers:{
                    //     "Content-Type":"application/x-www-form-urlencoded"
                    // }
                }
            ).then((response)=>{
               console.log(response);
               this.$showTip("请求成功");
            }).catch((error)=>{
                console.log(error);
                // alert("?????")
                this.$showTip("请求失败");
            });
        }
    },
    mounted() {
        // this.postTypesData();
        this.postFilmsDataById();
    }
};
</script>

<style lang="less" scoped>
// 首页样式
.home-box {
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.list-content {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0.1rem;
    font-size: 0rem;
    &::after {
        content: "";
        width: 0.1rem;
        display: inline-block;
    }
}
</style>